﻿<html>
  <head>
    <title>HorseJs</title>
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <link rel="stylesheet" href="./common.css" />
    <style>
      .content {
        color: #333;
        background: #fefefe;
        flex: 1;
        display: flex;
      }
      #menuContainer {
        background: rgb(219, 237, 255);
        width: 180px;
        line-height: 38px;
        font-size: 15px;
        padding: 12px 0px;
      }
      #menuContainer div {
        cursor: pointer;
        padding-left: 16px;
        border-left: 6px solid transparent;
      }
      #menuContainer div:hover {
        background: rgb(140, 200, 255);
        color: #fff;
        border-left: 6px solid rgb(121, 184, 255);
      }

      #menuContainer .menuSelected {
        background: rgb(33, 136, 255) !important;
        color: #fff;
        border-left: 6px solid rgb(0, 92, 197) !important;
        position: relative;
      }
      #menuContainer .menuSelected::after {
        display: block;
        width: 0px;
        height: 0px;
        position: absolute;
        right: 0px;
        top: calc(50% - 4px);
        border-top: solid 4px transparent;
        border-right: solid 4px #fff;
        border-bottom: solid 4px transparent;
        content: "";
      }
      #demoContainer {
        flex: 1;
      }
      .demoBtn {
        display: inline-block;
        margin: 8px 8px;
        border-radius: 3px;
        padding: 0px 12px;
        border: 1px solid rgb(140, 200, 255);
        cursor: pointer;
        height: 36px;
        line-height: 36px;
      }
      .demoBtn:hover {
        background: rgb(33, 136, 255);
        border: 1px solid rgb(33, 136, 255);
        color: #fff;
      }
      .demoBtn:active {
        background: rgb(3, 102, 214);
        border: 1px solid rgb(3, 102, 214);
        color: #fff;
      }
      .sectionSelected {
        display: block !important;
      }
      .section {
        display: none;
        padding: 26px 26px 80px 26px;
        overflow-y: auto;
      }
      .sectionCodeLink {
        position: absolute;
        right: 30px;
        bottom: 30px;
        padding: 0px 12px;
        line-height: 36px;
        background: rgb(33, 136, 255);
        color: white;
        box-shadow: 2px 2px 8px 0px #888;
        border-radius: 3px;
        font-size: 13px;
        cursor: pointer;
      }
      .sectionCodeLink:hover {
        box-shadow: 2px 2px 3px 0px #333;
        background: rgb(3, 102, 214);
      }
    </style>
  </head>
  <body>
    <div class="titleBar">
      <div class="titleTool">
        <div class="iconfont horse-minimize"></div>
        <div class="iconfont horse-maximize"></div>
        <div class="iconfont horse-close closeBtn"></div>
      </div>
    </div>
    <div class="content">
      <div id="menuContainer">
        <div id="menuWindow" class="menuSelected">窗口</div>
        <div id="menuDialog">对话框</div>
        <div id="menuInfo">系统信息</div>
        <div id="menuClipboard">剪切板</div>
        <div id="menuShell">shell</div>
        <div id="menuNet">网络</div>
        <div id="menuMenu">系统菜单</div>
        <div id="menuNotification">系统通知</div>
        <div id="menuGlobalShortcut">托盘图标</div>
        <div id="menuCrashReport">崩溃报告</div>
      </div>
      <div id="demoContainer">
        <div id="sectionWindow" class="section sectionSelected">
          <div class="demoBtn" id="windowSizeChange">改变窗口大小到800*600</div>
          <div class="demoBtn" id="hideShowWindow">
            窗口隐藏，3秒钟之后窗口再显示
          </div>
          <div class="demoBtn" id="maximizeWindow">最大化窗口</div>
          <div class="demoBtn" id="restoreWindow">还原窗口</div>
          <div class="demoBtn" id="minimizeWindow">最小化窗口</div>
          <div class="demoBtn" id="closeWindow">关闭窗口</div>
        </div>
        <div id="sectionDialog" class="section">
          <div class="demoBtn" id="openFile">打开文件（只能选择一个文件）</div>
          <div class="demoBtn" id="openMultiFile">
            打开文件（允许选择多个文件）
          </div>
          <div class="demoBtn" id="openFolder">打开一个目录</div>
        </div>
        <div id="sectionInfo" class="section">
          <div class="demoBtn" id="getDesktopPath">获取桌面路径</div>
          <div class="demoBtn" id="getAppDataPath">获取数据目录路径</div>
          <div class="demoBtn" id="getExePath">获取可执行文件路径</div>
          <div class="demoBtn" id="getExeFolder">获取可执行文件所在目录</div>
        </div>
        <div id="sectionClipboard" class="section">
          <div class="demoBtn" id="getClipboardText">
            获取剪切板内的文本信息
          </div>
        </div>
        <div id="sectionShell" class="section"></div>
        <div id="sectionNet" class="section"></div>
        <div id="sectionMenu" class="section"></div>
        <div id="sectionNotification" class="section"></div>
        <div id="sectionGlobalShortcut" class="section"></div>
        <div id="sectionCrashReport" class="section"></div>
      </div>
      <div class="sectionCodeLink">查看代码</div>
    </div>
    <script type="module">
      import { toolBtnLogic } from "./common.js";
      import { demoPageLogic } from "./demo/demoPageLogic.js";
      window.addEventListener("load", async () => {
        toolBtnLogic();
        demoPageLogic.init();
      });
    </script>
  </body>
</html>
